<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Register Page</title>
</head>
<body>
         <!-- Top Content: button show login form, Logo, some content -->
    <div id="top_content">       
            
        
        <div class="inside">

            
            <div id="menu">
                <ul>
                    <li><a class="main-menu-text" id="home" href="./Controller?action=toindex">HOME
                                    <span class="small-menu-text">| back to begin |</span>
                        </a></li>                    
                    <li><a class="main-menu-text" id="register" href="./Controller?action=toregister">REGISTER
                                    <span class="small-menu-text">| join us |</span>
                        </a></li>
                    <li><a class="main-menu-text" id="contact" href="./Controller?action=tocontact">CONTACT
                                    <span class="small-menu-text">| call us now |</span>
                        </a></li>
                </ul>
            </div> <!-- end of menu -->         

            
        </div> <!-- end of inside -->   
    </div> <!-- end of top_content -->
    
    <div id="bottom_content">
        <div class="inside">        
            <div class="inside-botton-content-left">
                <h4>
                    <span class="botton-content-title">REGISTER</span>
                    INFORMATION
                </h4>
                <p>
                    Welcome to Diet Planning, please enter your information into below for registering.
                </p>                                         
                        
                <div id="register_div">
                    <form id="register-form" action = "Controller" method="POST">
                        <br/>
                        <label>Full Name : </label>
                        <br/>
                        <input name="fullname" id="fullname" type="text" size="40" x-moz-errormessage="Please enter your First name." placeholder="Full Name"/><br/><br/>
                        
                        <label>User Name : </label><br/>
                        <input name="reg_username" id="reg_username" type="text" pattern="^[a-z0-9_-]{6,15}$" 
                        title="User name must be between 6 and 15 characters." size="40" required placeholder="User Name"/><span class="required">* </span><br/>                        
                        
                        <br/>
                        <label>Password : </label><br/>
                        <input name="reg_password" id="reg_password" type="password" patern="" size="40" required
                        onkeyup="passwordStrength(this.value);" onClick="passwordStrength(this.value);" placeholder="Password"/><span class="required">* </span>
                        
                        <div id="pass-strength-container">
                            <div id="passwordDescription">Password not entered yet!</div>
                            <div id="passwordStrength" class="strength0"></div>
                        </div>   
                                                                                             
                        <br/>
                        <br/>
                        <label>Confirm Password : </label><br/>
                        <input name="re_reg_password" id="re_reg_password" type="password" size="40" required 
                        onfocus="validatePass(document.getElementById('reg_password'), this);" 
                        oninput="validatePass(document.getElementById('reg_password'), this);" placeholder="Confirm Password"/><span class="required">* </span><br/>
                                                
                        
                        <br/>
                        <label>Address : </label>
                        <br/>
                        <input name="address" id="address" type="text" size="40" x-moz-errormessage="Please enter your Address." placeholder="Address"required/><span class="required">* </span><br/><br/>
                        
                        <label>Birthday : </label><br/>
                        <input name="birthday" id="birthdate" type="date" size="40" x-moz-errormessage="input Date not in true format yyyy-mm-dd." placeholder="yyyy-mm-dd" pattern="[0-9]{4}-(0[1-9]|1[012])-(0[1-9]|1[0-9]|2[0-9]|3[01])" /><br/>                        
                        <br/>
                        <label>Sex : </label><br/>
                        <input type="radio" name="sex" value="male" checked = "check"> Male 
                        <input type="radio" name="sex" value="female"> Female
                        <br/>
                        <label>Email</label><br/>
                        <input name="reg_email" id="reg_email" type="email" size="40" required placeholder="abc@iFood.com.vn"/><span class="required">* </span><br/>
                        
                        <br/>
                        <label>Confirm Email : </label><br/>
                        <input name="re_reg_email" id="re_reg_email" type="email" size="40" required
                        onfocus="validateEmail(document.getElementById('reg_email'), this);" 
                        oninput="validateEmail(document.getElementById('reg_email'), this);" placeholder="Confirm Email"/><span class="required">* </span><br/>
                        
                        <br/>
                        <label>Phone : </label><br/>
                        <input name="phone" id="phone" type="tel" size="40" required placeholder="Phone Number"/><br/>
                        <br/><br>
                        
                        <input type="checkbox" id="accept-checkbox" name="accept-checkbox" checked/><span style="font-style:italic;">I agree all terms of the website  </span>
                        <br><br>
                        
                        <input name="action" id="submit" type="submit" value="REGISTER"/>
                        <input name="reset" id="submit" type="reset" value="RESET"/>
                                                
                    </form>
                </div> <!-- register_div -->           
            </div> <!-- end of div inside botton content left -->           
            <!-- end of div inside botton content right -->
            
            
        </div> <!-- end of div inside -->
    </div> <!-- end of bottom content -->
</body>
</html>